<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <div>
      <t-date-time
        dateType="datetime"
        label="日期时间"
        labelPosition="top"
        default-year-month="2014/01"
        placeholder="placeholder"
        v-model="date1"
        displayFormatWithDateTime="YYYY年MM月DD日 HH时mm分"
        maxWidth="10px"
        @update:model-value="ceshi"
        readonly
      />
    </div>
    <div>
      <t-date-time
        labelPosition="left"
        label="日期"
        defaultYearMonth="2024/01"
        dateType="date"
        v-model="date2"
        displayFormatWithDate="YYYY年MM月DD日"
        todayBtn
        minDate=""
        maxDate=""
        @change="change"
        :required="true"
        :rules="[val => !!val || val === 0 || val === false || '必填不能为空']"
      />
    </div>
    <div>
      <t-date-time
        format24h
        now-btn
        with-seconds
        label="时间"
        dateType="time"
        v-model="date3"
        labelPosition="left"
        CancelButtonText="取消11"
        ConfirmButtonText="确定11"
        placeholder="nihao"
      />
    </div>
    <div>
      <t-date-time
        label="时间"
        dateType="time"
        disable
        labelPosition="left"
        v-model="date3"
      />
      <t-input type="datetime-local"></t-input>
    </div>
    <div style="width: 500px;">
      <t-date-time
        dateType="datetime"
        defaultTimeForDateTime="24"
        label="日期时间23"
        labelPosition="top"
        placeholder="placeholder"
        v-model="date1"
        format="YYYY-MM-DD HH:mm"
        maxWidth="10px"
        @change="change"
        @calendarChange="change"
        ref="ceshi233"
      />
    </div>
    <div>
      <t-date-time
        dateType="datetimerange"
        label="日期时间范围"
        labelPosition="top"
        placeholder="placeholder"
        v-model="date0"
        @change="change"
        :elDatePickerOptions="{ shortcuts:shortcuts}"
        valueFormat=""
        displayFormatWithDateTime="YYYY/MM/DD HH:mm:ss"
        displayFormatWithDate="YYYY/MM/DD"
      />
    </div>
    <div>
      <t-date-time
        ref="dateTime"
        labelPosition="left"
        label="日期"
        dateType="date"
        displayFormatWithDate="YYYY/MM/DD"
        displayFormatWithDateTime="YYYY/MM/DD HH:mm:ss"
        displayFormatWithTime="HH:mm"
        @change="change"
        @calendarChange="change"
        :required="true"
        :rules="[val => !!val || val === 0 || val === false || '必填不能为空']"
        placeholder="nihao"
      />
    </div>
    <div>
      <t-date-time
        style="opacity: 100%"
        class="fasr_date_time_picker_3db932"
        instanceCode="fasr_date_time_picker_3db932"
        label="时间"
        displayFormatWithDate="YYYY/MM/DD"
        displayFormatWithDateTime="YYYY/MM/DD HH:mm:ss"
        displayFormatWithTime="HH:mm"
        start="00:00"
        end="23:30"
        step="00:30"
        helpPlacement="bottom"
        labelPosition="top"
        :tabIndex="1"
        dateType="time"
        v-model="date3"
        placeholder="nihao"
        @change="change"
      >
      </t-date-time>
    </div>
    <div>
      <t-date-time
        format24h
        now-btn
        with-seconds
        label="时间选择"
        dateType="timeselect"
        v-model="date4"
        labelPosition="left"
        start="00:00"
        step="00:30"
        end="23:30"
        @change="change"
        :required="true"
        :rules="[val => !!val || val === 0 || val === false || '必填不能为空']"
      />
    </div>

    datetime:<div>{{ date0 }} {{ date1 }}</div> date:<div> {{ date2 }}</div>
    time:<div> {{ date3 }} {{ date4 }}</div>
  </div>
  <button @click="ceshi">123</button>
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
  setup() {
    let dateTime = ref();
    let ceshi233 = ref();
    let date0 = ref([]);
    let date1 = ref('2024-04-01 13:27:00');
    let date2 = ref('2024-11-01');
    let date3 = ref('03:30');
    let date4 = ref('03:30');
    let date5 = ref(null);
    let dateType = ref('date');
    let valueFormat233 = ref('YYYY-MM-DD')
    String.prototype.toDate = function () {
      return this;
    };
    const shortcuts = [
      {
        text: '@今天',
        onClick({ emit }) {
          valueFormat233.value = '';
          emit('pick', '@今天');
        },
      },
      {
        text: 'Yesterday',
        value: () => {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          return date;
        },
      },
      {
        text: 'A week ago',
        value: () => {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          return date;
        },
      },
    ];
    onMounted(() => {
      setTimeout(() => {
        // date2.value = '2019-02-01';
        // date2.value = new Date();
      }, 200);
    });
    return {
      ceshi233,
      dateType,
      dateTime,
      date0,
      date1,
      date2,
      date3,
      date4,
      date5,
      shortcuts,
      valueFormat233,
      handleChange(value, reason, details) {
        console.log(value, reason, details, 'change');
      },
      ceshi(data) {
        // console.log(data);
        // date1.value = '';
        // console.log(dateTime.value);
        // console.log(dateTime.value.validate());
        // dateType.value = dateType.value == 'time' ? 'date' : 'time';
        console.log(ceshi233.value)
        window.ceshi233 = ceshi233.value
        ceshi233.value.elDatePickerOptions.placement = 'right'
      },
      change(data) {
        console.log(data, 'data');
      },
    };
  },
};
</script>
